import React, { CSSProperties } from "react";
import { Button as AntdButton } from 'antd';
import styled from 'styled-components';


export const Button = (props: {
    width: number;
    icon?: React.ReactNode;
    reverseFill?: boolean,
    title?: React.ReactNode | string;
    active?: boolean;
    disabled?: boolean;
    fillColor?: string,
    color?: string,
    activeFillColor?: string,
    activeColor?: string,
    onClick?: () => Promise<void>
}) => {

    let { fillColor, color, activeFillColor, activeColor } = props;

    if (!activeFillColor) {
        activeFillColor = '#FFF';
    }
    if (!activeColor) {
        activeColor = '#0091FF';
    }

    if (props.title && props.title !== '') {
        let buttonStyle: CSSProperties = {
            width: `${props.width}px`,
            height: `${props.width}px`,
        };

        let iconStyle: CSSProperties = {
            fontSize: `${props.width * 0.4}px`,
            lineHeight: `${props.width * 0.4}px`,
        };

        let labelStyle: CSSProperties = {
            fontSize: `${props.width * 0.25}px`,
            lineHeight: `${props.width * 0.4}px`,
        };

        if (props.active) {
            if (props.reverseFill) {
                iconStyle.fontWeight = 800;
                labelStyle.fontWeight = 800;
                iconStyle.color = activeFillColor;
                labelStyle.color = activeFillColor;
                buttonStyle.backgroundColor = activeColor;
            } else {
                iconStyle.fontWeight = 800;
                labelStyle.fontWeight = 800;
                iconStyle.color = activeColor;
                labelStyle.color = activeColor;
                buttonStyle.backgroundColor = activeFillColor;
            }
        } else {
            if (props.reverseFill) {
                iconStyle.color = fillColor;
                labelStyle.color = fillColor;
                buttonStyle.backgroundColor = color;
            } else {
                iconStyle.color = color;
                labelStyle.color = color;
                buttonStyle.backgroundColor = fillColor;
            }
        }
        return (
            <AntdButton type={'text'} onClick={props.onClick}
                disabled={props.disabled}
                style={buttonStyle}>
                <Container>
                    <Icon style={iconStyle}>{props.icon}</Icon>
                    {
                        props.title && <Label style={labelStyle}>{props.title}</Label>
                    }
                </Container>
            </AntdButton>
        );
    } else {

        let buttonStyle: CSSProperties = {
            width: `${props.width}px`,
            height: `${props.width}px`,
            margin: '0px',
            padding: '2px'
        };

        let iconStyle: CSSProperties = {
            fontSize: `${props.width * 0.4}px`,
            lineHeight: `${props.width * 0.4}px`,
        };

        if (props.active) {
            if (props.reverseFill) {
                iconStyle.fontWeight = 800;
                iconStyle.color = `#0091FF`;
            } else {
                iconStyle.fontWeight = 800;
                iconStyle.color = `#FFF`;
                buttonStyle.backgroundColor = `#0091FF`;
            }
        }
        return (
            <AntdButton type={'text'} onClick={props.onClick}
                disabled={props.disabled}
                style={buttonStyle}>
                <Container>
                    <Icon style={iconStyle}>{props.icon}</Icon>
                </Container>
            </AntdButton>
        );
    }
}

const Container = styled.div`
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;

const Icon = styled.div`
`;

const Label = styled.div`
`;

export default Button;